<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="js/ol.css">
    <script src="js/ol-debug.js"></script>
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <style>
        #marker {
            width: 20px;
            height: 20px;
            border: 1px solid #088;
            border-radius: 10px;
            background-color: #0FF;
            opacity: 0.5;
        }
        #vienna {
            text-decoration: none;
            color: white;
            font-size: 11pt;
            font-weight: bold;
            text-shadow: black 0.1em 0.1em 0.2em;
        }
        .popover{
            max-width:300px;
            min-width: 100px;

        }
        .popover-content {
            min-width: 700px;
            max-width: 1000px;

        }
        #map-switch{
            position:absolute;
            top: 50px;
            right: 50px;
            z-index: 10;
            padding: 10px;
            background-color: #ddccac;
            /*阴影*/
            box-shadow: 5px 5px 3px #888888;
            /*边框*/
            border:1px solid #9d9d9d;
            /*圆角*/
            border-radius:10px;
        }
        #map-measure{
            position: absolute;
            z-index: 10;
            left: 100px;
            top:30px;
        }
        /*测量样式*/
        .tooltip {
            position: relative;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 4px;
            color: white;
            padding: 4px 8px;
            opacity: 0.7;
            white-space: nowrap;
        }
        .tooltip-measure {
            opacity: 1;
            font-weight: bold;
        }
        .tooltip-static {
            background-color: #ffcc33;
            color: black;
            border: 1px solid white;
        }
        .tooltip-measure:before,
        .tooltip-static:before {
            border-top: 6px solid rgba(0, 0, 0, 0.5);
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            content: "";
            position: absolute;
            bottom: -6px;
            margin-left: -7px;
            left: 50%;
        }
        .tooltip-static:before {
            border-top-color: #ffcc33;
        }
    </style>
</head>
<body>
<div id="map" style="width: 100%">
    <div style="display: none;">
        <!-- Clickable label for Vienna -->
        <a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
        <div id="marker" title="Marker"></div>
        <!-- Popup -->
        <div id="popup" title="基本信息"></div>
    </div>
</div>
<script>
    var webip="http://localhost:";
    var gisip="http://localhost:";
    var webport="8080/";
    var gisport="8080/";
    /*********************************************************地图初始化**********************************************************/
    /*底图初始化*/
    var format = 'image/png';
    //view
    var view=new ol.View({
        // 设置成都为地图中心
        center: ol.proj.transform([508881,299705],"EPSG:3857","EPSG:3857"),
        zoom: 18
    });
    //var osm=new ol.layer.Tile({source: new ol.source.OSM()});


    var tilePoint = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:point'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolyline = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polyline'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    var tilePolygon = new ol.layer.Tile({
        //visible: false,
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/whuxcy/wms',
            params: {'FORMAT': format,
                'VERSION': '1.1.1',
                tiled: true,
                "STYLES": '',
                "LAYERS": 'whuxcy:polygon'
                //"exceptions": 'application/vnd.ogc.se_inimage',
                //tilesOrigin: 8176078.237520734 + "," + 704818.0275364731
            }
        })
    });
    /*矢量图层初始化*/
    var pointTypename="xcy:point";
    var pointVectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        url: function(extent) {
            return  gisip+gisport+'geoserver/xcy/wfs?service=WFS&version=1.0.0&request=GetFeature&typeName='+pointTypename+'&outputFormat=application%2Fjson';
        },
        strategy: ol.loadingstrategy.bbox
    });
    var pointVectorLayer = new ol.layer.Vector({
        title:"点",
        source: pointVectorSource,
        style: styleFunction,
        renderMode:'image'
    });
    function styleFunction(feature) {
        var height=feature.get("Text");
        if(map.getView().getZoom()<20)
        {
            height="";
        }
        return new ol.style.Style({
            image:new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({
                    color: "#389BCD",
                    opacity: 0.5
                })
            }),
            text:new ol.style.Text({
                text:height,
                textAlign:"left",
                offsetX:5,
                fill: new ol.style.Fill({
                    color: "#cd0500",
                    opacity:1
                }),
                stroke:new ol.style.Stroke({
                    color:"#dd942e",
                    width:1
                }),
                font:" 14px SimHei"
            })
        });
    }
    // map
    var map = new ol.Map({
        layers: [
            tilePoint,
            tilePolyline,
            tilePolygon,
            pointVectorLayer
        ],
        view:view,
        target: 'map'
    });
    /*点击事件初始化*/
    /*overlay*/
    // Popup showing the position the user clicked
    var popup = new ol.Overlay({
        element: document.getElementById('popup'),
        autoPan:true,
        autoPanMargin:100,
        positioning:'center-right'
    });
    map.addOverlay(popup);

    map.on('click',mapClick);
    //点击地图查询
    var select=new ol.interaction.Select({
        //condition: ol.events.condition.pointerMove,
        layers:[pointVectorLayer],
        multi:true,
        style:function (feature) {
            return st(feature,true);
        }
    });
    select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];
        /*        var geometry=feature.getGeometry();
         var attribute=  feature.getProperties();
         var temp=attribute["NAME"];
         temp=attribute.NAME;
         var coordinates=geometry.getCoordinates();
         var polygons=geometry.getPolygons();
         var polygon=geometry.getPolygon(0);

         alert(feature.get("NAME"));*/
        var wktformat= new ol.format.WKT();
        alert(feature.getProperties());
        //alert(wktformat.writeGeometry(feature.getGeometry()));
    });
    map.addInteraction(select);
    function mapClick(evt)
    {
        var element = popup.getElement();
        $(element).popover('destroy');

        var coor=evt.coordinate;
        coor=coor.join(',');
        //注意这里直接将点坐标提交，与图层做intersrct分析，对于面图层是没关系的。如果是查询，点或者线图形，一定要将coor先设置一个容差，经行buffer之后的图形，再去与图层叠加分析。不设置容差几乎就找不到了
        //图层的图形字段是geom，不同图层的图形字段都要自己先看下自己的，有的是the_geom，有的是shape等等，具体分析即可。
        var filter='filter=<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml"><Intersects><PropertyName>the_geom</PropertyName><gml:Point><gml:coordinates>'+coor+'</gml:coordinates></gml:Point></Intersects></Filter>'

        $.ajax({
            type: "GET",
            //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&CQL_FILTER=EntityHand='7E25'",
            //属性查询
            //url: "http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&PROPERTYNAME=Layer&FEATUREID=polygon.2",
            //空间查询
            url: 'http://localhost:8080/geoserver/xcy/wfs?service=WFS&request=GetFeature&version=1.1.0&typename=xcy:polygon&outputFormat=json&'+filter ,

            dataType:'json',
            success: function(data){
                console.log("返回的数据: " + data.features[0].properties.Layer);
                var features=data.features;
                if (features.length>0)
                {
                    var feature=data.features[0];
                    var type=feature["geometry"]["type"];
                    var property=feature["properties"];
                    var coordinate = feature.geometry.coordinates[0][0];
                    var hdms="点名："+property["Text"];
                    hdms=hdms+"<br/>";
                    hdms = hdms+"图层名：:"+property["Layer"];
                    hdms=hdms+"<br/>";
                    hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];

                    $(element).popover('destroy');
                    popup.setPosition(evt.coordinate);
                    // the keys are quoted to prevent renaming in ADVANCED mode.
                    $(element).popover({
                        'placement': 'top',
                        'animation': false,
                        'html': true,
                        'content': hdms
                    });
                    $(element).popover('show');
                }
                else
                {
                    $(element).popover('destroy');

                }


            }

        });
    }

</script>
</body>
</html>